<template>
  <div>
    <el-table v-show="shrinkButtonShow" ref="table" :data="tableData" @selection-change="handleSelectionChange" height="100%">
      <el-table-column type="selection" align="center" width="55"/>
      <el-table-column align="center" prop="COUNTY">
        <template slot="header" slot-scope="scope">
          <span style="cursor: pointer" :class="urbanArea?'dropdown-link':''" @click="urbanClick">
            市区<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <span style="cursor: pointer" :class="town?'dropdown-link':''" @click="townClick">
            城镇<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </template>
        <template slot-scope="scope">
          <div>{{ scope.row.TOWN == ''?'/': scope.row.TOWN}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="STATIONNAME" align="center" label="气象站点"></el-table-column>
    </el-table>
    <div v-show="urbanArea" class="muneUrban">
      <el-row>
        <el-col :span="6" v-for="item in countyList" :key="item.COUNTYCODE">
          <div :class="selecteCountyList.indexOf(item.COUNTY) != -1?'selectStyle':'selectText'" style="display: flex;justify-content:
          center;cursor: pointer" @click="setCounty(item.COUNTY)">{{ item.COUNTY }}</div>
        </el-col>
      </el-row>
      <div class="buttonSty">
        <el-button size="small" type="info" round @click="clearCounty">取消</el-button>
        <el-button size="small" type="primary" round @click="searchCounty">确认</el-button>
      </div>
    </div>

    <div v-show="town" class="muneUrban">
      <el-row>
        <el-col :span="6" v-for="item in townList" :key="item.TOWN">
          <div :class="selecteTownList.indexOf(item.TOWN) != -1?'selectStyle':'selectText'" style="display: flex;justify-content:
          center" @click="setTown(item.TOWN)">{{ item.TOWN == ''?'/': item.TOWN }}</div>
        </el-col>
      </el-row>
      <div class="buttonSty">
        <el-button size="small" type="info" round @click="clearTown">取消</el-button>
        <el-button size="small" type="primary" round @click="searchTown">确认</el-button>
      </div>
    </div>
    <div class="shrinkButton" @click="qhShrink"><i :class="shrinkButtonShow?'el-icon-arrow-up':'el-icon-arrow-down'"/></div>
  </div>
</template>

<script>
export default {
  name: "detectionPoint",
  props:{
    newCompanyTqList:{
      type:Array,
      default:function _default(){
        return []
      }
    }
  },
  data(){
    return{
      tableData:[],
      urbanArea:false,
      town:false,
      countyList:[],
      selecteCountyList:[],
      townList:[],
      selecteTownList:[],
      shrinkButtonShow:true
    }
  },
  mounted() {
    this.tableData = this.newCompanyTqList
    this.getCountyList()
    this.getTownList()
    this.toggleSelection()
  },
  methods:{
    getCountyList(){
      let list = []
      this.newCompanyTqList.map(item =>{
        if (list.indexOf(item.COUNTYCODE) == -1){
          list.push(item.COUNTYCODE)
          this.countyList.push(item)
        }
      })
    },
    getTownList(){
      let list = []
      this.newCompanyTqList.map(item =>{
        if (list.indexOf(item.TOWN) == -1){
          list.push(item.TOWN)
          this.townList.push(item)
        }
      })
    },
    //多选区县
    setCounty(item){
      if (this.selecteCountyList.indexOf(item) == -1){
        this.selecteCountyList.push(item)
      }else {
        this.selecteCountyList.splice(this.selecteCountyList.indexOf(item),1)
      }
    },
    //多选乡镇
    setTown(item){
      if (this.selecteTownList.indexOf(item) == -1){
        this.selecteTownList.push(item)
      }else {
        this.selecteTownList.splice(this.selecteTownList.indexOf(item),1)
      }
    },
    //查询选中区县
    searchCounty(){
      // let list = JSON.parse(JSON.stringify(this.tableData))
      this.tableData = []
      this.newCompanyTqList.forEach(item =>{
        if (this.selecteCountyList.indexOf(item.COUNTY) != -1){
          this.tableData.push(item)
        }
      })
      if (this.tableData.length == 0) this.tableData = this.newCompanyTqList
      this.setTownList()
      this.urbanArea = false
    },
    //清空区县
    clearCounty(){
      this.tableData = this.newCompanyTqList
      this.setTownList()
      this.selecteCountyList = []
      this.urbanArea = false
    },
    //查询选中乡镇
    searchTown(){
      let list = JSON.parse(JSON.stringify(this.tableData))
      this.tableData = []
      list.forEach(item =>{
        if (this.selecteTownList.indexOf(item.TOWN) != -1){
          this.tableData.push(item)
        }
      })
      if (this.tableData.length == 0) {
        this.tableData = this.newCompanyTqList
        this.searchCounty()
      }
      this.town = !this.town
    },
    //清空乡镇
    clearTown(){
      this.tableData = this.newCompanyTqList
      this.selecteTownList = []
      this.searchCounty()
      this.town = !this.town
    },
    urbanClick(){
      if (this.town)return
      this.urbanArea = !this.urbanArea
    },
    townClick(){
      if (this.urbanArea)return
      this.town = !this.town
    },
    //根据选中区县筛选乡镇
    setTownList(){
      let list = []
      this.townList = []
      this.tableData.map(item =>{
        if (list.indexOf(item.TOWN) == -1){
          list.push(item.TOWN)
          this.townList.push(item)
        }
      })
    },
    toggleSelection() {
      this.$refs.table.toggleAllSelection()
    },
    handleSelectionChange(selection){
      this.$emit('renderPoints',selection)
    },
    qhShrink(){
      this.shrinkButtonShow = !this.shrinkButtonShow
      this.$emit('shrink',this.shrinkButtonShow)
    },
  }
}
</script>

<style scoped lang="stylus">
.tableMakerList{

}
.dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.muneUrban{
  position absolute
  padding (100/96)rem
  width 100%
  box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(214,223,239,0.42);
  background-color #ffffff
  left: 0;
  top: 10%;
  z-index: 1001;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: (70/96)rem;
  color: #4F4F4F;
  max-height 300px
  overflow auto
  .el-col{
    margin-bottom (50/96)rem
  }
}
.buttonSty{
  margin-top (50/96)rem
  display flex
  justify-content end
}
.selectStyle{
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: (30/96)rem;
  color: #3775F3;
}
.selectText{
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: (30/96)rem;
}
.shrinkButton{
  padding 5px
  background-color #f8f8f8
  display flex
  align-items center
  justify-content center
}
</style>
